<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VueComponent</title>
    <script src="../js/vue.js"></script>
  </head>
  <!-- 
    关于VueComponent:
            1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的

            2.我们只需要写<school/>或者<school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

            3.特别注意:每次调用Vue.extend返回的都是一个全新VueComponent

            4.关于this指向:
                (1).组件配置中:
                    data函数、methods中的函数、watch中的函数、computed中的函数  他们的this均是  [VueComponent实例对象]
                (2).new Vue(options)配置中:
                    data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是   [Vue实例对象]

            5.VueComponent的实例对象,以后简称vc(也可以称之为:组件实例对象).
            Vue的实例对象以后简称vm
   -->
  <body>
    <div id="root">
      <school></school>
    </div>
  </body>
  <script>
    // 创建一个组件school组件
    const school = Vue.extend({
      data() {
        return {
          name: '太原科技大学',
          address: '北京市昌平区',
        }
      },
      template: `
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>地址：{{address}}</h2>
        </div>
      `,
    })

    console.log('创建的组件是什么?', school) //是一个构造函数VueComponent
    console.log('Vue.extend是什么?', Vue.extend)

    // 创建Vue实例Vm
    new Vue({
      el: '#root',
      components: {
        school,
      },
    })
  </script>
</html>
